<template>
    <div v-if="loading" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.8)" element-loading-spinner="el-icon-loading" :element-loading-text="$t('index.editor.20250324-1')"></div>
    <div v-else>
        <el-container>
            <el-header style="background-color: #f1f3f4; border-bottom: solid 1px #d3d8da">
                <div>
                    <div class="hoverClass">
                        <el-button :icon="leftIcon" class="buttonLeftClass" type="text" @click="leftClick">{{ leftSpan }}</el-button>
                    </div>
                    <div v-if="false" class="hoverClass">
                        <el-button class="buttonLeftClass" icon="el-icon-full-screen" type="text" @click="handelClick(7)">{{ funText }}</el-button>
                    </div>
                    <div class="hoverClass">
                        <el-dropdown class="buttonLeftClass" @command="handleCommand">
                            <el-button class="buttonTitle" icon="el-icon-refresh" type="text">
                                旋转
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="顺时针90°" icon="el-icon-plus">顺时针90°</el-dropdown-item>
                                <el-dropdown-item command="逆时针90°" icon="el-icon-minus">逆时针90°</el-dropdown-item>
                                <el-dropdown-item command="水平镜像" icon="el-icon-d-arrow-left">水平镜像</el-dropdown-item>
                                <el-dropdown-item command="垂直镜像" icon="el-icon-d-arrow-right">垂直镜像</el-dropdown-item>
                                <el-dropdown-item command="自定义角度" icon="el-icon-edit">自定义角度</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div class="hoverClass">
                        <el-dropdown class="buttonLeftClass" @command="handleCommandAlign">
                            <el-button class="buttonTitle" icon="el-icon-s-operation" type="text">
                                对齐
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="左对齐" icon="el-icon-arrow-left">左对齐</el-dropdown-item>
                                <el-dropdown-item command="右对齐" icon="el-icon-arrow-right">右对齐</el-dropdown-item>
                                <el-dropdown-item command="上对齐" icon="el-icon-arrow-up">上对齐</el-dropdown-item>
                                <el-dropdown-item command="下对齐" icon="el-icon-arrow-down">下对齐</el-dropdown-item>
                                <el-dropdown-item command="水平等间距" icon="el-icon-arrow-down">水平等间距</el-dropdown-item>
                                <el-dropdown-item command="垂直等间距" icon="el-icon-arrow-down">垂直等间距</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div class="hoverClass">
                        <el-dropdown style="float: left; margin-top: 5px; margin-left: 5px; margin-right: 5px" @command="handleCommandMakeUP">
                            <el-button class="buttonTitle" icon="el-icon-money" type="text">
                                组合
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="组合" icon="el-icon-connection">组合</el-dropdown-item>
                                <el-dropdown-item command="右对齐" icon="el-icon-link">取消组合</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div v-if="isLock" class="hoverClass">
                        <el-button class="buttonLeftClass" icon="el-icon-unlock" type="text" @click="handleLock('解锁')">解锁</el-button>
                    </div>
                    <div v-else class="hoverClass">
                        <el-button class="buttonLeftClass" icon="el-icon-lock" type="text" @click="handleLock('锁定')">锁定</el-button>
                    </div>
                    <div class="hoverClass">
                        <el-button class="buttonLeftClass" icon="el-icon-picture-outline" type="text" @click="handelClick(6)">图库</el-button>
                    </div>
                    <div class="hoverClass">
                        <el-button class="buttonLeftClass" icon="el-icon-upload2" type="text" @click="handelClick(18)">导入</el-button>
                    </div>
                    <div class="hoverClass">
                        <el-button class="buttonLeftClass" icon="el-icon-download" type="text" @click="handelClick(19)">导出</el-button>
                    </div>
                    <div class="hoverClass">
                        <el-button :disabled="isRevoke" class="buttonLeftClass" icon="el-icon-caret-left" type="text" @click="handelClick(16)">撤销</el-button>
                    </div>
                    <div class="hoverClass">
                        <el-button :disabled="isRecovery" class="buttonLeftClass" icon="el-icon-caret-right" type="text" @click="handelClick(17)">恢复</el-button>
                    </div>
                    <div class="hoverClass buttonLeftClass">
                        <el-dropdown @command="handleCommandView">
                            <el-button class="buttonTitle" type="text">
                                <i class="el-icon-arrow-down el-icon--right"></i>
                                {{ viewSize }}
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="25">25%</el-dropdown-item>
                                <el-dropdown-item command="50">50%</el-dropdown-item>
                                <el-dropdown-item command="75">75%</el-dropdown-item>
                                <el-dropdown-item command="100">100%</el-dropdown-item>
                                <el-dropdown-item command="125">125%</el-dropdown-item>
                                <el-dropdown-item command="150">150%</el-dropdown-item>
                                <el-dropdown-item command="175">175%</el-dropdown-item>
                                <el-dropdown-item command="200">200%</el-dropdown-item>
                                <el-dropdown-item command="自适应">自适应</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </div>
                <div>
                    <div class="hoverClass">
                        <el-button :icon="rightIcon" class="buttonRightClass" type="text" @click="rightClick">{{ rightSpan }}</el-button>
                    </div>
                    <div class="hoverClass">
                        <el-button class="buttonRightClass" icon="el-icon-view" type="text" @click="handelClick(2)">预览</el-button>
                    </div>
                    <div class="hoverClass">
                        <el-button class="buttonRightClass" icon="el-icon-star-off" type="text" @click="handelClick(1)">保存</el-button>
                    </div>
                </div>
            </el-header>
            <el-main>
                <div class="topo-editor">
                    <TopoToolbox ref="topoToolbox" class="topoToolbox" />
                    <TopoMain ref="topoMain" class="topoMain" @lockStatus="lockStatus" @menuClick="menuClick" @recoveryFlagClick="recoveryFlagClick" @revokeFlagClick="revokeFlagClick" />
                    <TopoProperties ref="topoProperties" class="topoProperties" @printData="printData" />
                </div>
            </el-main>
        </el-container>
        <el-dialog v-dialogDrag :close-on-click-modal="false" :visible.sync="dialogVisible" append-to-body title="图库" width="1100px">
            <div class="dialogClass">
                <TopoSelectImage ref="topoSelectImage" />
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="selectImageClick">选 择</el-button>
            </span>
        </el-dialog>
        <el-dialog :close-on-click-modal="false" :visible.sync="deviceBindDialog" append-to-body title="设备绑定管理">
            <DeviceBind ref="deviceBind" />
        </el-dialog>
    </div>
</template>

<script>
import TopoToolbox from '../components/screen/TopoToolbox';
import TopoMain from '../components/screen/TopoMain';
import TopoProperties from '../components/screen/TopoProperties';
import TopoSelectImage from '../components/screen/TopoSelectImage';
//动作特效
import anime from 'animejs';
import request from '@/utils/request';

export default {
    name: 'TopoEditor',
    components: {
        TopoToolbox,
        TopoMain,
        TopoProperties,
        TopoSelectImage,
    },
    data() {
        return {
            dialogVisible: false,
            isFullFlag: false,
            funText: '全屏',
            deviceName: '',
            time: 3,
            //动态布局
            left: 14,
            center: 72,
            right: 14,

            leftIcon: 'el-icon-s-fold',
            leftSpan: '折叠',
            isLeft: true,
            iconLeftStyle: {
                float: 'left',
                padding: '5px',
            },
            rightIcon: 'el-icon-s-unfold',
            rightSpan: '折叠',
            isRight: true,
            iconRightStyle: {
                float: 'right',
                padding: '5px',
            },
            htmlTitle: '云组态',
            baseApi: this.topoUtil.getServerIp() + ':' + this.topoUtil.getServerPort() + '/prod-api',
            deviceBindDialog: false,
            loading: true,
            isLock: false,
            isRevoke: true,
            isRecovery: true,
            viewSize: '自适应',
        };
    },
    created() {
        if (this.$route.query.accessToken) {
            sessionStorage.setItem('Admin-Token-WebTopo', this.$route.query.accessToken);
            this.loading = false;
        } else if (this.$store.state.app.guid ? this.$store.state.app.guid : this.$route.query.guid) {
            this.getToken();
        } else {
            this.loading = false;
        }
    },
    mounted() {
        // 监听页面全屏
        window.addEventListener('clickFullscreen', (e) => {
            if (screenfull.isFullscreen) {
                this.isFullFlag = true;
            } else {
                this.isFullFlag = false;
            }
        });
    },
    methods: {
        handleCommandView(command) {
            if (command != '自适应') {
                this.viewSize = command + '%';
            } else {
                this.viewSize = '自适应';
            }
            this.$refs.topoMain.handleView(command);
        },
        getToken() {
            let url = '/ignoreToken/getTokenByGuid';
            let query = {
                ztGuid: this.$store.state.app.guid ? this.$store.state.app.guid : this.$route.query.guid,
                token: sessionStorage.getItem('Admin-Token-WebTopo') == 'undefined' ? '' : sessionStorage.getItem('Admin-Token-WebTopo'),
            };
            request({
                url: url,
                method: 'get',
                params: query,
            })
                .then((res) => {
                    // console.log("token获取成功",res.data);
                    sessionStorage.setItem('Admin-Token-WebTopo', res.data);
                    this.loading = false;
                })
                .catch((err) => {
                    // console.log("获取token失败");
                });
        },
        //撤销恢复标志位
        revokeFlagClick(flag) {
            this.isRevoke = flag;
        },
        recoveryFlagClick(flag) {
            this.isRecovery = flag;
        },
        //锁定/解锁
        handleLock(command) {
            this.$refs.topoMain.handleLock(command);
        },
        //组合
        handleCommandMakeUP(command) {
            this.$refs.topoMain.makeUpClick(command);
        },
        lockStatus(val) {
            this.isLock = val;
        },
        menuClick(val) {
            // console.log("右键菜单点击了",val);
            if (val == '顺时针90°') {
                this.handelClick(9);
            } else if (val == '逆时针90°') {
                this.handelClick(10);
            } else if (val == '水平镜像') {
                this.handelClick(11);
            } else if (val == '垂直镜像') {
                this.handelClick(12);
            } else if (val == '自定义角度') {
                this.handelClick(15);
            } else if (val == '自定义角度') {
                this.handelClick(15);
            } else if (val == '置顶') {
                this.handelClick(13);
            } else if (val == '置底') {
                this.handelClick(14);
            } else if (val == '预览') {
                this.handelClick(2);
            } else if (val == '保存') {
                this.handelClick(1);
            } else if (val == '图库') {
                this.handelClick(6);
            }
        },
        handleCommandAlign(command) {
            this.$refs.topoMain.alignClick(command);
        },
        handleCommand(command) {
            if (command == '顺时针90°') {
                this.handelClick(9);
            } else if (command == '逆时针90°') {
                this.handelClick(10);
            } else if (command == '水平镜像') {
                this.handelClick(11);
            } else if (command == '垂直镜像') {
                this.handelClick(12);
            } else if (command == '自定义角度') {
                this.handelClick(15);
            }
        },
        printData() {
            this.$refs.topoMain.printData(this.time);
        },
        selectImageClick() {
            let selectImage = this.$refs.topoSelectImage.handleChoice();
            if (selectImage == null) {
                this.$message({
                    message: '请选择图片',
                    type: 'warning',
                });
                return;
            } else {
                //this.dialogVisible=false;
                selectImage.forEach((element) => {
                    this.$refs.topoMain.addImageData(this.baseApi + element.resourceUrl);
                });
                this.$message({
                    message: '添加成功',
                    type: 'success',
                });
                this.$refs.topoSelectImage.clearChoice();
            }
        },
        leftClick() {
            if (this.leftIcon == 'el-icon-s-fold') {
                this.leftSpan = '展开';
                this.leftIcon = 'el-icon-s-unfold';
                this.left = 0;
            } else {
                this.leftSpan = '折叠';
                this.leftIcon = 'el-icon-s-fold';
                this.left = 14;
            }
            this.center = 100 - this.left - this.right;
            anime({
                targets: '.topoToolbox',
                translateX: 0,
                width: this.left + 'vw',
                easing: 'easeInOutCirc',
            });
            let that = this;
            anime({
                targets: '.topoMain',
                translateX: 0,
                width: this.center + 'vw',
                easing: 'easeInOutCirc',
                complete: function () {
                    console.log('Animation complete');
                    //初始化刻度尺
                    that.$refs.topoMain.initRuler();
                    if (that.viewSize == '自适应') {
                        that.$refs.topoMain.handleView('自适应');
                    }
                },
            });
        },
        rightClick() {
            if (this.rightIcon == 'el-icon-s-unfold') {
                this.rightSpan = '展开';
                this.rightIcon = 'el-icon-s-fold';
                this.right = 0;
                anime({
                    targets: '.topoProperties',
                    translateX: 0,
                    width: '0px',
                    easing: 'easeInOutCirc',
                });
            } else {
                this.rightSpan = '折叠';
                this.rightIcon = 'el-icon-s-unfold';
                this.right = 14;
                anime({
                    targets: '.topoProperties',
                    translateX: 0,
                    width: '270px',
                    easing: 'easeInOutCirc',
                });
            }
            this.center = 100 - this.left - this.right;
            let that = this;
            anime({
                targets: '.topoMain',
                translateX: 0,
                width: this.center + 'vw',
                easing: 'easeInOutCirc',
                complete: function () {
                    console.log('Animation complete');
                    //初始化刻度尺
                    that.$refs.topoMain.initRuler();
                    if (that.viewSize == '自适应') {
                        that.$refs.topoMain.handleView('自适应');
                    }
                },
            });
        },
        clickFullscreen() {
            let element = document.getElementById('q-app'); //指定全屏区域元素
            if (this.isFullscreen) {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                    this.funText = '全屏';
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                    this.funText = '全屏';
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                    this.funText = '全屏';
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                    this.funText = '全屏';
                }
            } else {
                if (element.requestFullscreen) {
                    element.requestFullscreen();
                    this.funText = '恢复';
                } else if (element.webkitRequestFullScreen) {
                    element.webkitRequestFullScreen();
                    this.funText = '恢复';
                } else if (element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                    this.funText = '恢复';
                } else if (element.msRequestFullscreen) {
                    // IE11
                    element.msRequestFullscreen();
                    this.funText = '恢复';
                }
            }
            this.isFullscreen = !this.isFullscreen;
        },
        handelClick(index) {
            if (index == 1) {
                //保存
                this.$refs.topoMain.printData(this.time);
            } else if (index == 2) {
                //预览
                this.$refs.topoMain.fullScreen();
            } else if (index == 3) {
                //复制
                this.$refs.topoMain.copyItem();
                this.$refs.topoMain.pasteItem();
            } else if (index == 4) {
                //删除
                this.$refs.topoMain.removeItem();
            } else if (index == 5) {
                //测试
                this.$refs.topoMain.alignClick();
            } else if (index == 6) {
                //图库
                this.dialogVisible = true;
            } else if (index == 7) {
                //全屏
                this.clickFullscreen();
            } else if (index == 8) {
                //设备绑定
                this.deviceBindDialog = true;
            } else if (index == 9) {
                //顺时针旋转
                this.$refs.topoProperties.transform('顺时针旋转');
            } else if (index == 10) {
                //逆时针旋转
                this.$refs.topoProperties.transform('逆时针旋转');
            } else if (index == 11) {
                //水平镜像
                this.$refs.topoProperties.transform('水平镜像');
            } else if (index == 12) {
                //垂直镜像
                this.$refs.topoProperties.transform('垂直镜像');
            } else if (index == 13) {
                //置顶
                this.$refs.topoProperties.stack('置顶');
            } else if (index == 14) {
                //置底
                this.$refs.topoProperties.stack('置底');
            } else if (index == 15) {
                //自定义角度
                this.$prompt('', '自定义旋转角度', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    closeOnClickModal: false,
                    closeOnPressEscape: false,
                    inputValue: '0',
                    inputErrorMessage: '旋转角度不能为空',
                    inputValidator: (value) => {
                        // 点击按钮时，对文本框里面的值进行验证
                        if (!value) {
                            return '角度不能为空';
                        }
                        if (isNaN(value)) {
                            return '旋转角度必须是数字';
                        }
                    },
                }).then(({ value }) => {
                    this.$refs.topoProperties.transform('自定义角度', value);
                });
            } else if (index == 16) {
                //撤销
                this.$refs.topoMain.revoke();
            } else if (index == 17) {
                //恢复
                this.$refs.topoMain.recovery();
            } else if (index == 18) {
                //导入
                this.$refs.topoMain.handleImport();
            } else if (index == 19) {
                //导出
                this.$refs.topoMain.handleDownLoad();
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.title {
    text-align: center;
    background-color: #545c64;
    font-size: 18px;
    font-size: 600;
    color: #333;
}

.buttonTitle {
    color: #333;
}

.deviceContent {
    text-align: center;
    padding: 10px;
    border: 1px solid #dcdfe6;
    font-size: 15px;
}

.topo-editor {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
}
</style>
<style lang="scss" scoped>
.el-header,
.el-footer {
    background-color: #fff;
    color: #333;
    text-align: center;
    line-height: 30px;
    height: 60px !important;
}

.el-main {
    background-color: #fff;
    color: #333;
    text-align: left;
    padding: 0px;
    overflow: hidden;
}

.dialogClass {
    height: 550px;
    overflow-y: hidden;
    overflow-x: hidden;
}

.buttonLeftClass {
    float: left;
    margin-top: 5px;
    margin-left: 20px;
    color: #333;
}

.hoverClass :hover {
    background-color: #e4e4e4;
}

.buttonRightClass {
    float: right;
    margin-top: 5px;
    margin-left: 20px;
    color: #333;
}

.topoToolbox {
    width: 14vw;
    height: calc(100vh - 70px);
}

.topoMain {
    width: 72vw;
}

.topoProperties {
    position: fixed;
    top: 60px;
    right: 0px;
    width: 270px;
    z-index: 999;
}
</style>
